﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>粽子</title>
<script>
//动态设置根字体
	var oHtml = document.documentElement;
	getSize();
	window.onresize = function(){
		getSize();
	}
	function getSize(){
		var screenWidth = oHtml.clientWidth;
		oHtml.style.fontSize = screenWidth/(750/36) + 'px';//  /100*2
	} 
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);}.d_n{ display:none;}.p_a{ position:absolute}.p_r{ position:relative}.o_s{overflow-y:scroll; height:100%; }.text_c{ text-align:center;}
body{font-family:"微软雅黑",sans-self; height:100%; width:100%;overflow:hidden;}
html,body{ height:100%; width:100%;}
input{border:none;outline:none;-webkit-tap-highlight-color:rgba(37,37,37,0);-webkit-background-color:rgba(37,37,37,0);background-color:#252525; background-color:rgba(37,37,37,0);}
body{ background:url(img/bg.jpg) no-repeat top;background-size:100% auto;}
.bottom{bottom:0; left:0; width:100%;}
.prize{ width:100%; height:25rem; background:url(img/prize_bg.png) bottom no-repeat; background-size:100% auto;}
.prize img{ position:absolute;width:10rem; height:auto; bottom:3rem; left:50%; margin-left:-5rem;}
.con_1{ width:100%; height:33rem; background:url(img/bottom.png) bottom no-repeat; background-size:100% auto;}
.con_2{ position:relative;}
.con_2 p{ width:100%; height:auto; color:#8a8a8a; font-size:0.8rem; text-align:center; margin-top:1.8rem; opacity:0;}
#lotteryContainer {
	position:relative; width:100%; margin-top:0.5rem;}
#drawPercent {
	color:#F60;
}
</style>
</head>

<body>
    <div class="con_2">
      <div class="p_r prize text_c">
          <img id="xxx" src="img/jiangping.png"/>
      </div>
      <p class="op">恭喜你获得了:</p>
    <div id="lotteryContainer"></div>
<script src="js/jquery.min.js"></script>
<script src="js/lottery.js"></script>
<script>
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg);  //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}
var lotteryId=getUrlParam('id');
if(lotteryId==1){	
	var imgs='img/1.png';
	var imgj='imgs/1.png';
			}else if(lotteryId<=3&&lotteryId>1){
	var imgs='img/2.png';
	var imgj='imgs/2.png';
			}else if(lotteryId<=6&&lotteryId>3){
	var imgs='img/3.png';
	var imgj='imgs/3.png';
			}else if(lotteryId<=10&&lotteryId>6){
	var imgs='img/4.png';
	var imgj='imgs/4.png';
			}else if(lotteryId<=25&&lotteryId>10){
	var imgs='img/5.png';
	var imgj='imgs/5.png';
			}else if(lotteryId<=50&&lotteryId>25){
	var imgs='img/6.png';
	var imgj='imgs/6.png';
			}else if(lotteryId<=80&&lotteryId>50){
	var imgs='img/7.png';
	var imgj='imgs/7.png';
			}else if(lotteryId<=110&&lotteryId>80){
	var imgs='img/8.png';
	var imgj='imgs/8.png';
			}else if(lotteryId<=197&&lotteryId>110){
	var imgs='img/9.png';
	var imgj='imgs/9.png';
}

var img='btn_w.png';
	window.onload = function () {
	var lottery = new Lottery('lotteryContainer', img, 'image', 300, 100, drawPercent);
	lottery.init(imgs, 'image');
		function drawPercent(percent) {
		if(percent>45){
			$('#xxx').attr('src',imgj);
			$('.op').css('opacity','1');
			$('#sai').css('opacity','0');
			}
		}
	}

	function getRandomStr(len) {
		var text = "";
		var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		for( var i=0; i < len; i++ )
			text += possible.charAt(Math.floor(Math.random() * possible.length));
		return text;
	}
</script>
    </div>
</body>
</html>
